<template>
  <div class="home">
    <p>{{num}}</p>
    <p>{{name}}</p>
    <p>{{age}}</p>
    <button @click="add">++</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref,reactive,toRefs } from 'vue';
export default {
  name: 'Home',
  components: {
  },
  // data(){
  //   return{
  //     num:0
  //   }
  // },
  // methods: {
  //   add(){
  //     this.num++
  //   }
  // },
  setup(props,{emit}){ // 组合api 注意：在标签上，使用的变量或者是方法名，都需要 return 出去
  // console.log(emit);
  //ref 用来声明 基本的数据类型的
  // reactive 用来声明复杂数据类型
    // console.log(this);
    let num = ref(10);
    // console.log(num);
    let data = reactive({
      name: '张三',
      age: 18
    })
    const add = () => {
      num.value++
      data.age++
    }
    return{
      num,
      add,
      ...toRefs(data)
    }
  }
}
// git 练习
</script>
